﻿@model Model.Database.Role
@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <title>查看角色</title>
    <link href="~/Content/Scripts/ZTree/css/zTreeStyle/zTreeStyle.css" rel="stylesheet" />
    <link href="~/Content/Scripts/bootstrap-3.3.5-dist/css/bootstrap.min.css" rel="stylesheet" />
    <link href="~/Content/Scripts/h-ui/css/HuiFold.css" rel="stylesheet" />

    <style>
        body {
            overflow-x: hidden;
        }

        .table {
            width: 100%;
            margin: 0 auto;
            margin-top: 10px;
            margin-bottom: 10px;
            text-align: center;
        }

        .leftTd {
            width: 30%;
            font-weight: bold;
        }

        .rightTd {
            width: 70%;
        }

        .ztree {
            margin-top: 10px;
        }

        pre {
            padding: 0;
            margin: 0;
            word-wrap: break-word;
            white-space: pre-wrap;
            text-align: left;
            border: 0;
        }
    </style>
    <!--引入脚本解决兼容性(hack技术，必须放入head中)-->
    <!--[if lt IE 9]>
        <script src="~/Content/Scripts/html5_css3/html5shiv.min.js"></script>
        <script src="~/Content/Scripts/html5_css3/respond.min.js"></script>
        <script src="~/Content/Scripts/PIE-2.0beta1/PIE_IE678.js"></script>
    <![endif]-->
</head>
<body>
    <form id="form1" method="post">
        <ul id="Huifold1" class="Huifold">
            <li class="item">
                <h4>基础信息<b>-</b></h4>
                <div class="info">
                    <table class="table table-bordered table-hover table-condensed">
                        <input type="hidden" name="id" value="@Model.RoleId" />
                        <tr>
                            <td class="leftTd">角色名称</td>
                            <td class="rightTd">
                                @Model.RoleName
                            </td>
                        </tr>
                        <tr>
                            <td class="leftTd">描述</td>
                            <td class="rightTd">
                                <pre>@Model.Description</pre>
                            </td>
                        </tr>
                    </table>
                </div>
            </li>
            <li class="item">
                <h4>权限分配<b>-</b></h4>
                <div class="info">
                    <input type="hidden" id="powerIdStr" name="PowerIdStr" />
                    <ul id="tree1" class="ztree" style="margin-bottom:10px;padding:0;"></ul>
                </div>
            </li>
        </ul>
    </form>
</body>
</html>
<script src="~/Content/Scripts/jquery-2.0.3.min.js"></script>
<script src="~/Content/Scripts/h-ui/js/H-ui.js"></script>
<script src="~/Content/Scripts/ZTree/js/jquery.ztree.all.min.js"></script>
<script src="~/Content/Scripts/layer/2.1/layer.js"></script>

<script src="~/Content/Scripts/TxyJs.js"></script>
<script>
    var iframeIndex = parent.layer.getFrameIndex(window.name); //获取窗口索引
    var tree;// zTree 的参数配置
    var setting = {// zTree 的数据属性
        data: {
            simpleData: {//使用简单json数据
                enable: true,
            }
        },
        async: {
            enable: true,
            url: "/Role/Manager/MenuBtnCheckedList?id=@Model.RoleId",
            type: "post",
        },
        check: {
            enable: true,
        },
        key: {
            checked: "isChecked",
        },
        callback: {
            onAsyncSuccess: treeOnAsyncSuccess,
        },
    };
    $(function () {
        $.Huifold("#Huifold1 .item h4", "#Huifold1 .item .info", "fast", 3, "click");
        $.fn.zTree.init($("#tree1"), setting);
    });


    /**************************Ztree相关的函数***********************************************/
    function treeOnAsyncSuccess() {
        var treeObj = $.fn.zTree.getZTreeObj("tree1");
        treeObj.expandAll(true);
        var parentNodes = treeObj.getNodes();
        var nodes = treeObj.transformToArray(parentNodes);
        for (var i = 0; i < nodes.length; i++) {
            treeObj.setChkDisabled(nodes[i], true);
        }
    }
    /**************************Ztree相关的函数***********************************************/
</script>